<template>
  <div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div id="cart">
        <!-- 空购物车 -->
        <div class="empty" v-if="goodsList.length===0">
          <img src="../assets/images/cart.png" alt />
          <p>购物车空空如也</p>
          <van-button type="info" size="mini" @click="goShopping">去逛逛</van-button>
        </div>
        <!-- 购物车不为空 -->
        <div class="goods" v-else v-for="(item,index) in goodsList" :key="item.id">
          <van-swipe-cell>
            <van-card
              :num="item.num"
              :price="item.sell_price"
              :title="item.title"
              :thumb="item.thumb_path"
            >
              <template #footer>
                <van-stepper v-model="sessionList[index].count" @change="editCar" />
              </template>
            </van-card>
            <template #right>
              <van-button square @click="Del(item)" text="删除" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </van-pull-refresh>
    <van-submit-bar :price="sum" button-text="提交订单" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [],
      sessionList: [],
      ids: [],
      isLoading: false,
      count: 0
    };
  },
  created() {
    this.getSession();
    this.getCart();
    this.$store.commit("getCarNum");
  },
  methods: {
    goShopping() {
      this.$router.push("/GoodsList");
    },
    async getCart() {
      if (this.sessionList.length == 0) return;
      let newArr = [];
      this.sessionList.forEach(item => {
        newArr.push(item.id);
      });
      let str = newArr.join(",");
      const { data: res } = await this.$http.get(
        `/api/goods/getshopcarlist/${str}`
      );
      this.goodsList = res.message;
    },
    getSession() {
      this.sessionList = window.sessionStorage.getItem("car")
        ? JSON.parse(window.sessionStorage.getItem("car"))
        : [];
    },
    Del(role) {
      let index = this.goodsList.findIndex(item => {
        return item.id == role.id;
      });
      this.goodsList.splice(index, 1);
      let index2 = this.sessionList.findIndex(item => {
        return item.id == role.id;
      });
      this.sessionList.splice(index2, 1);
      this.editCar();
    },
    editCar() {
      window.sessionStorage.setItem("car", JSON.stringify(this.sessionList));
    },
    onRefresh() {
      setTimeout(() => {
        this.getSession();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    }
  },
  computed: {
    sum() {
      let sum = 0;
      this.sessionList.forEach(item => {
        sum += item.count * item.price;
      });
      return sum * 100;
    }
  }
};
</script>

 <style lang="less" scoped>
.delete-button {
  height: 100%;
}
#cart {
  margin: 45px 0;
  padding-top: 1px;
  .empty {
    color: #ccc;
    padding: 15px 0;
    text-align: center;
    img {
      width: 100px;
    }
  }
  .goods {
    margin: 10px 0;
    background-color: #fafafa;
    padding-bottom: 5px;
    .van-stepper {
      margin-right: 15px;
      text-align: right;
    }
  }
  .van-submit-bar {
    position: fixed;
    bottom: 0;
    display: block;
  }
  .van-pull-refresh {
    min-height: 600px !important;
    display: block !important;
  }
}
</style>